<template>
  <div class="iot">
    <div
      class="left"
      :class="{ 'left-hide': leftHide }"
      ref="leftRef"
    >
      <div class="left-panel">
        <transition name="fade">
          <el-scrollbar v-show="selectedWorksite === null">
            <!-- 头部 -->
            <div class="chart-wrapper flex-y">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>工地统计</span>
              </div>
              <div class="sites-num">
                <img
                  class="sites-img"
                  :src="WorksiteTotalSum"
                  alt="工地总数图片"
                />
                <div class="sites-statistics">
                  <div>工地总数</div>
                  <div>
                    <div
                      style="
                        font-size: 32px;
                        display: inline;
                      "
                    >
                      {{ worksiteData.length }}
                    </div>
                    个
                  </div>
                </div>
              </div>
            </div>

            <img
              class="line-separator"
              :src="LineSeparator"
              alt="分割线"
            />
            <div class="chart-wrapper flex-y">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>监测设备占比</span>
              </div>

              <div class="sites-num">
                <img
                  class="sites-img"
                  :src="CheckEquipmentTotalSum"
                  alt="监测设备总数图片"
                />
                <div class="sites-statistics">
                  <div>监测设备总数</div>
                  <div>
                    <div
                      style="
                        font-size: 32px;
                        display: inline;
                      "
                    >
                      {{ totalMonitorDeviceCount }}
                    </div>
                    个
                  </div>
                </div>
              </div>
              <div
                class="chart-wrapper-content flex-x cross-center"
              >
                <chart
                  chart-id="type-1-chart1"
                  :chart-height="150"
                  chart-width="100%"
                  :options="chart1Options"
                />
                <div class="flex-y cross-start flex-1">
                  <div class="legend flex-x cross-center">
                    <div
                      class="legend-round-icon orange"
                    ></div>
                    <span class="legend-title"
                      >不正常设备数</span
                    >
                    <span class="legend-value">0个</span>
                  </div>
                  <div class="legend flex-x cross-center">
                    <div
                      class="legend-round-icon green"
                    ></div>
                    <span class="legend-title"
                      >正常设备数</span
                    >
                    <span class="legend-value"
                      >{{ totalMonitorDeviceCount }}个</span
                    >
                  </div>
                </div>
              </div>

              <div
                class="device-num"
                v-for="(item, index) in monitorType"
                :key="index"
              >
                <div>
                  <div>{{ item.type }}</div>
                  <img
                    class="sites-img"
                    :src="item.icon"
                    :alt="item.type"
                  />
                </div>
                <div>
                  <div>总数</div>
                  <div class="device-num-text">
                    {{ item.total }}
                  </div>
                </div>
                <div>
                  <div>在线</div>
                  <div class="device-num-text">
                    {{ item.online }}
                  </div>
                </div>
                <div>
                  <div>离线</div>
                  <div class="device-num-text">
                    {{ item.outline }}
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </transition>

        <transition name="fade">
          <el-scrollbar v-show="selectedWorksite !== null">
            <div class="chart-wrapper flex-x">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>扬尘监测</span>
                <span class="current-time">{{
                  currentTime
                }}</span>
                <span
                  @click="getCurrentTime"
                  class="shuanxin-marker"
                >
                  <Icon
                    title="刷新"
                    name="shuaxin"
                    color="#d2e6f0"
                    font-size="14"
                  />
                </span>
              </div>
            </div>
            <el-select
              :popper-append-to-body="true"
              popper-class="legend-layer"
              v-model="defaultDeviceKey"
              placeholder="请选择"
              @change="changeDeviceKey"
              class="select-devicekey"
            >
              <el-option
                v-for="item in arrDustsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div class="ycjc">
              <div class="ycjc-item">
                <div class="ycjc-prefix">
                  <div class="ycjc-pre">
                    <div class="ycjc-pre-index">PM2.5</div>
                  </div>
                </div>
                <div class="ycjc-afterMarker">
                  <div class="ycjc-after">
                    <div class="ycjc-after-index">
                      {{ dustObj.pm25 }}mg/m³
                    </div>
                  </div>
                </div>
              </div>
              <div class="ycjc-item">
                <div
                  class="ycjc-prefix"
                  style="margin-left: -5px"
                >
                  <div class="ycjc-pre">
                    <div class="ycjc-pre-index">PM10</div>
                  </div>
                </div>
                <div class="ycjc-afterMarker">
                  <div class="ycjc-after">
                    <div class="ycjc-after-index">
                      {{ dustObj.pm10 }}mg/m³
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="ycjc">
              <div class="ycjc-item">
                <div class="ycjc-prefix">
                  <div class="ycjc-pre">
                    <div class="ycjc-pre-index">温度</div>
                  </div>
                </div>
                <div class="ycjc-afterMarker">
                  <div class="ycjc-after">
                    <div class="ycjc-after-index">
                      {{ dustObj.temperature }}℃
                    </div>
                  </div>
                </div>
              </div>
              <div class="ycjc-item">
                <div
                  class="ycjc-prefix"
                  style="margin-left: -5px"
                >
                  <div class="ycjc-pre">
                    <div class="ycjc-pre-index">湿度</div>
                  </div>
                </div>
                <div class="ycjc-afterMarker">
                  <div class="ycjc-after">
                    <div class="ycjc-after-index">
                      {{ dustObj.humidity }}rh
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="ycjc" style="margin-left: -15px">
              <div class="ycjc-item">
                <div class="ycjc-prefix">
                  <div class="ycjc-pre">
                    <div class="ycjc-pre-index">噪音</div>
                  </div>
                </div>
                <div class="ycjc-afterMarker">
                  <div class="ycjc-after">
                    <div class="ycjc-after-index">
                      {{ dustObj.noise }}db
                    </div>
                  </div>
                </div>
              </div>
              <div class="ycjc-fxfs">
                <div>风向：{{ dustObj.windDirection }}</div>
                <div>风速：{{ dustObj.windspeed }}</div>
              </div>
            </div>
            <img
              class="line-separator"
              :src="LineSeparator"
              alt="分割线"
            />
            <div class="chart-wrapper flex-x main-between">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>视频监控</span>
              </div>
              <!-- <span class="more" @click="moreVideo"
                >更多&nbsp;&gt;&nbsp;</span
              > -->
            </div>
            <div style="margin-top: -30px">
              <div class="ycjc-spjk">
                <div class="dljk-circle"></div>
                <div class="ycjc-spjk-title">
                  道路监控({{ arrRoadMonitor.length }}个)
                </div>
              </div>
              <div class="video-monitor">
                <span
                  @click="clickRoadPre"
                  v-if="arrRoadMonitor.length > 2"
                >
                  <Icon
                    title="上一步"
                    name="shangyibu"
                    font-size="14"
                    class="video-syb"
                    :class="{
                      'syb-active':
                        arrRoadMonitor[
                          arrRoadMonitor.indexOf(
                            disRoadMonitor[0]
                          ) - 1
                        ]
                    }"
                  />
                </span>
                <!--  -->
                <div
                  v-for="item in disRoadMonitor"
                  :key="item.name"
                  class="video-monitor-road"
                  :class="{
                    'video-monitor-road-active':
                      clickVideoName === item.name
                  }"
                  @click="clickMonitor(item)"
                >
                  <div class="video-monitor-road-title">
                    {{ item.name }}
                  </div>
                </div>
                <span
                  @click="clickRoadNext"
                  v-if="arrRoadMonitor.length > 2"
                >
                  <Icon
                    title="下一步"
                    name="xiayibu"
                    font-size="14"
                    class="video-xyb"
                    :class="{
                      'xyb-active':
                        !arrRoadMonitor[
                          arrRoadMonitor.indexOf(
                            disRoadMonitor[
                              disRoadMonitor.length - 1
                            ]
                          ) + 1
                        ]
                    }"
                  />
                </span>
              </div>
              <div class="ycjc-spjk">
                <div class="cljk-circle"></div>
                <div class="ycjc-spjk-title">
                  车辆监控({{ arrCarMonitor.length }}个)
                </div>
              </div>
              <div class="video-monitor">
                <span
                  @click="clickCarPre"
                  v-if="arrCarMonitor.length > 2"
                >
                  <Icon
                    title="上一步"
                    name="shangyibu"
                    font-size="14"
                    class="video-syb"
                    :class="{
                      'syb-active':
                        arrCarMonitor[
                          arrCarMonitor.indexOf(
                            disCarMonitor[0]
                          ) - 1
                        ]
                    }"
                  />
                </span>
                <div
                  v-for="item in disCarMonitor"
                  :key="item.name"
                  class="video-monitor-car"
                  :class="{
                    'video-monitor-car-active':
                      clickVideoName === item.name
                  }"
                  @click="clickMonitor(item)"
                >
                  <div class="video-monitor-car-title">
                    {{ item.name }}
                  </div>
                </div>
                <span
                  @click="clickCarNext"
                  v-if="arrCarMonitor.length > 2"
                >
                  <Icon
                    title="下一步"
                    name="xiayibu"
                    font-size="14"
                    class="video-xyb"
                    :class="{
                      'xyb-active':
                        !arrCarMonitor[
                          arrCarMonitor.indexOf(
                            disCarMonitor[
                              disCarMonitor.length - 1
                            ]
                          ) + 1
                        ]
                    }"
                  />
                </span>
              </div>

              <div class="ycjc-spjk">
                <div class="pljk-circle"></div>
                <div class="ycjc-spjk-title">
                  喷淋监控({{ arrWaterMonitor.length }}个)
                </div>
              </div>

              <div class="video-monitor">
                <span
                  @click="clickWaterPre"
                  v-if="arrWaterMonitor.length > 2"
                >
                  <Icon
                    title="上一步"
                    name="shangyibu"
                    font-size="14"
                    class="video-syb"
                    :class="{
                      'syb-active':
                        arrWaterMonitor[
                          arrWaterMonitor.indexOf(
                            disWaterMonitor[0]
                          ) - 1
                        ]
                    }"
                  />
                </span>
                <div
                  v-for="item in disWaterMonitor"
                  :key="item.name"
                  class="video-monitor-water"
                  :class="{
                    'video-monitor-water-active':
                      clickVideoName === item.name
                  }"
                  @click="clickMonitor(item)"
                >
                  <div class="video-monitor-water-title">
                    {{ item.name }}
                  </div>
                </div>
                <span
                  @click="clickWaterNext"
                  v-if="arrWaterMonitor.length > 2"
                >
                  <Icon
                    title="下一步"
                    name="xiayibu"
                    font-size="14"
                    class="video-xyb"
                    :class="{
                      'xyb-active':
                        !arrWaterMonitor[
                          arrWaterMonitor.indexOf(
                            disWaterMonitor[
                              disWaterMonitor.length - 1
                            ]
                          ) + 1
                        ]
                    }"
                  />
                </span>
              </div>
            </div>
            <!-- <img
              class="line-separator"
              :src="LineSeparator"
              alt="分割线"
            />
            <div class="chart-wrapper flex-x">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>渣土车监测</span>
              </div>
            </div>
            <img
              class="line-separator"
              :src="LineSeparator"
              alt="分割线"
            />
            <div class="chart-wrapper flex-x">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>实名制</span>
              </div>
            </div> -->
          </el-scrollbar>
        </transition>
      </div>

      <div
        class="left-close"
        @click="leftHide = !leftHide"
      ></div>

      <div
        class="bar"
        @mousedown.prevent="handleLeftMouseDown"
      ></div>
    </div>

    <div
      class="right"
      :class="{ 'right-hide': rightHide }"
      ref="rightRef"
    >
      <transition name="fade">
        <div
          v-show="selectedWorksite === null"
          class="right-content"
        >
          <div class="right-content-tag-t" />
          <div class="right-content-tag-b" />
          <div class="right-content-title">工地列表</div>
          <div class="right-content-search">
            <Search
              v-model="keyword"
              placeholder="请输入项目名称"
            />
          </div>
          <div class="right-content-list">
            <el-scrollbar>
              <div
                class="worksite-item"
                v-for="(item, index) in shownWorksiteData"
                :key="index"
                @click="handleWorksiteClick(index)"
              >
                <span class="worksite-item-name">{{
                  item.title
                }}</span>
                <!--                <span class="worksite-item-period"-->
                <!--                  >周期：{{ item.period }}</span-->
                <!--                >-->
              </div>
            </el-scrollbar>
          </div>
        </div>
      </transition>

      <transition name="fade">
        <div
          v-if="selectedWorksite !== null"
          class="right-detail"
        >
          <div class="right-detail-header">
            <div
              class="back-button"
              @click="selectedWorksite = null"
            >
              <i class="el-icon-arrow-left" />
            </div>
            <div class="right-detail-header-right">
              <span class="name">{{
                selectedWorksite.title
              }}</span>
              <!--              <div class="address">-->
              <!--                <Icon-->
              <!--                  name="dizhi"-->
              <!--                  font-size="16"-->
              <!--                  :color="'#d2e6f080'"-->
              <!--                />-->
              <!--                <span-->
              <!--                  >地址地址地址地址地址地址地址地址地址</span-->
              <!--                >-->
              <!--              </div>-->
            </div>
          </div>

          <div class="right-detail-content">
            <el-scrollbar>
              <!--              <WorksiteProperty name="项目简介："/>-->
              <!--              <WorksiteProperty name="建设单位："/>-->
              <!--              <WorksiteProperty name="施工单位："/>-->
              <!--              <WorksiteProperty name="劳务公司："/>-->
              <!--              <WorksiteProperty name="监理单位："/>-->
              <!--              <WorksiteProperty name="项目地址："/>-->
              <!--              <WorksiteProperty name="项目类别："/>-->
              <!--              <WorksiteProperty name="合同价格："/>-->
              <!--              <WorksiteProperty name="开工时间："/>-->
              <!--              <WorksiteProperty name="竣工时间："/>-->
              <!--              <WorksiteProperty name="项目状态："/>-->
              <!--              <WorksiteProperty name="项目流程："/>-->
              <!--              <WorksiteProperty name="进度状态："/>-->
              <!--              <WorksiteProperty name="联系人："/>-->
              <!--              <WorksiteProperty name="联系电话："/>-->
              <WorksiteProperty
                v-for="(item, index) in worksiteList"
                :key="index"
                :name="item.name + '：'"
                :value="item.value"
              ></WorksiteProperty>
              <WorksiteImageProperty
                name="效果图"
                :images="worksiteImages[0]"
              />
              <WorksiteImageProperty
                name="平面图"
                :images="worksiteImages[1]"
              />
              <WorksiteImageProperty
                name="形象进度图"
                :images="worksiteImages[2]"
              />
            </el-scrollbar>
          </div>
        </div>
      </transition>

      <div
        class="right-close"
        @click="rightHide = !rightHide"
      ></div>
      <div
        class="bar"
        @mousedown.prevent="handleRightMouseDown"
      ></div>
    </div>

    <div
      ref="videoDialog"
      v-show="showVideo"
      class="video-dialog"
    >
      <div class="video-dialog-header">
        <span class="title">{{ videoData.name }}</span>
        <span class="date">{{ videoData.dateTime }}</span>
        <div class="close" @click="closeVideo"></div>
      </div>
      <div class="video-dialog-content">
        <div id="hls-player" />
      </div>
    </div>
  </div>
</template>

<script>
import 'xgplayer'
import HlsJsPlayer from 'xgplayer-hls.js'
import { squareKilometer } from '@/utils/constant'
import WorksiteTotalSum from '@/assets/img/worksite-total-sum.png'
import CheckEquipmentTotalSum from '@/assets/img/check-equipment-total-sum.png'
import IconYcjc from '@/assets/img/icon-ycjc.png'
import IconSpjk from '@/assets/img/icon-spjk.png'
import IconZtcjc from '@/assets/img/icon-ztcjc.png'
import IconSmzjc from '@/assets/img/icon-smzjc.png'
import LineSeparator from '@/assets/img/line-separator.png'
import TitlePrefix from '@/assets/img/title-prefix.png'
import Icon from '@/components/icon'
import Chart from '@/components/chart/index'
import Search from '@/components/search'
import { getAction } from '@/utils/helper'
import { topicDefaultList } from '@/api/tree'
import iotRequest from '@/utils/request/iotRequest'
import WorksiteProperty from '@/views/cockpit/iot/components/WorksiteProperty'
import WorksiteImageProperty from '@/views/cockpit/iot/components/WorksiteImageProperty'
import {
  retrieveDataServiceById,
  getResourceConfig
} from '@/api/multiple-dataservice'
import New from '@/utils/new'
import md5 from 'md5'

let _layerManager, _viewer

// 工地标点
const _worksiteEntities = []

// 视频标点
const _videoEntities = []

let _player

export default {
  name: 'Iot',
  components: {
    WorksiteProperty,
    WorksiteImageProperty,
    Icon,
    Chart,
    Search
  },
  data() {
    return {
      WorksiteTotalSum,
      CheckEquipmentTotalSum,
      IconYcjc,
      IconSpjk,
      IconZtcjc,
      IconSmzjc,
      LineSeparator,
      TitlePrefix,
      squareKilometerSymbol: squareKilometer,
      leftHide: false,
      leftX: '',
      leftWidth: '',
      rightHide: false,
      rightX: '',
      rightWidth: '',
      // 关键词 前端过滤树形结构
      keyword: '',
      monitorType: [
        {
          type: '扬尘监测',
          icon: IconYcjc,
          total: 0,
          online: 0,
          outline: 0
        },
        {
          type: '视频监控',
          icon: IconSpjk,
          total: 0,
          online: 0,
          outline: 0
        }
        // {
        //   type: '渣土车监测',
        //   icon: IconZtcjc,
        //   total: '62',
        //   online: '52',
        //   outline: '10'
        // },
        // {
        //   type: '实名制监测',
        //   icon: IconSmzjc,
        //   total: '16',
        //   online: '8',
        //   outline: '8'
        // }
      ],
      chart1Options: {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        color: ['#ffa862', '#00d075'],
        series: [
          {
            name: '监测设备占比',
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              color: 'white',
              alignTo: 'none',
              position: 'center',
              formatter: '{d}% \r\n 设备正常率'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 5,
              length2: 10
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 0, name: '不正常设备数' },
              {
                value: 0,
                name: '正常设备数',
                label: { show: true }
              }
            ]
          }
        ]
      },
      worksiteData: [],
      selectedWorksite: null,
      defaultDeviceKey: null,
      arrDustsOptions: [],
      dustObj: {
        pm25: '',
        pm10: '',
        noise: '',
        temperature: '',
        deviceKey: '',
        humidity: '',
        windDirection: '',
        windspeed: ''
      },
      showVideo: false,
      videoData: {
        name: '',
        channel: '',
        dateTime: ''
      },
      arrRoadMonitor: [],
      arrCarMonitor: [],
      arrWaterMonitor: [],
      disRoadMonitor: [],
      disCarMonitor: [],
      disWaterMonitor: [],
      clickVideoName: '',
      currentTime: '',
      worksiteList: [
        {
          name: '项目简介',
          value: '',
          fieldName: 'desc'
        },
        {
          name: '建设单位',
          value: '',
          fieldName: 'orgOwner'
        },
        {
          name: '施工单位',
          value: '',
          fieldName: 'orgGeneralContractor'
        },
        {
          name: '劳务公司',
          value: '',
          fieldName: 'orgLabour'
        },
        {
          name: '监理单位',
          value: '',
          fieldName: 'orgSupervision'
        },
        {
          name: '建筑体量',
          value: '',
          fieldName: 'floorArea'
        },
        {
          name: '项目类别',
          value: '',
          fieldName: 'category'
        },
        {
          name: '合同价格',
          value: '',
          fieldName: 'contractPrice'
        },
        {
          name: '开工时间',
          value: '',
          fieldName: 'beginTime'
        },
        {
          name: '竣工时间',
          value: '',
          fieldName: 'endTime'
        },
        {
          name: '项目状态',
          value: '',
          fieldName: 'status'
        },
        {
          name: '进度状态',
          value: '',
          fieldName: 'progressStatus'
        },
        {
          name: '联系人',
          value: '',
          fieldName: 'contact'
        },
        {
          name: '联系电话',
          value: '',
          fieldName: 'mobile'
        }
      ],
      worksiteImages: [
        [
          {
            name: '效果图1',
            url: 'http://img.sys321.com/allimg/190928/160T12V8-0.jpg'
          },
          {
            name: '效果图2',
            url: 'http://img.sys321.com/allimg/190928/160T14036-1.jpg'
          },
          {
            name: '效果图3',
            url: 'http://img.sys321.com/allimg/190928/160T124K-2.jpg'
          },
          {
            name: '效果图4',
            url: 'http://img.sys321.com/allimg/190928/160T1M05-3.jpg'
          },
          {
            name: '效果图5',
            url: 'http://img.sys321.com/allimg/190928/160T1AL-4.jpg'
          }
        ],
        [
          {
            name: '平面图1',
            url: 'http://img.sys321.com/allimg/190928/160T12V8-0.jpg'
          }
        ],
        [
          {
            name: '形象进度图1',
            url: 'http://img.sys321.com/allimg/190928/160T12V8-0.jpg'
          },
          {
            name: '形象进度图2',
            url: 'http://img.sys321.com/allimg/190928/160T14036-1.jpg'
          },
          {
            name: '形象进度图3',
            url: 'http://img.sys321.com/allimg/190928/160T124K-2.jpg'
          },
          {
            name: '形象进度图4',
            url: 'http://img.sys321.com/allimg/190928/160T1M05-3.jpg'
          }
        ]
      ]
    }
  },
  computed: {
    defaultViewId() {
      return this.$store.state.layer.defaultViewId
    },
    shownWorksiteData() {
      return this.worksiteData.filter(
        (item) =>
          item.title &&
          item.title.indexOf(this.keyword) !== -1
      )
    },
    totalMonitorDeviceCount() {
      return this.worksiteData.reduce(
        (previous, current) => {
          return (
            previous +
            (current.dusts
              ? this.classify(current.dusts, 'deviceKey')
                  .length
              : 0) +
            (current.lives ? current.lives.length : 0)
          )
        },
        0
      )
    },
    dustMonitorDeviceCount() {
      return this.worksiteData.reduce(
        (previous, current) => {
          return (
            previous +
            (current.dusts
              ? this.classify(current.dusts, 'deviceKey')
                  .length
              : 0)
          )
        },
        0
      )
    },
    videoMonitorDeviceCount() {
      return this.worksiteData.reduce(
        (previous, current) => {
          return (
            previous +
            (current.lives ? current.lives.length : 0)
          )
        },
        0
      )
    }
  },
  watch: {
    worksiteData(val) {
      if (val) {
        this.monitorType[0].total =
          this.dustMonitorDeviceCount
        this.monitorType[0].online =
          this.dustMonitorDeviceCount
        this.monitorType[1].total =
          this.videoMonitorDeviceCount
        this.monitorType[1].online =
          this.videoMonitorDeviceCount
      }
    },
    selectedWorksite(val) {
      // console.log(val)
      if (val) {
        // _worksiteEntities.forEach((item) => {
        //   item.show = false
        // })
        // if (val.lives && val.lives.length) {
        //   this.addVideoEntities(val.lives)
        // }

        const classifyList = this.classify(
          val.dusts,
          'deviceKey'
        )

        classifyList.forEach((item, index) => {
          const obj = item.data[0]
          if (index === 0) {
            this.defaultDeviceKey = obj.deviceKey
            this.dustObj = obj
            this.dustObj.deviceKey = obj.deviceKey
          }
          obj.value = obj.deviceKey
          obj.label = obj.deviceKey
          this.arrDustsOptions.push(obj)
        })

        // console.log(this.arrDustsOptions)

        // val.dusts.forEach((item, index) => {
        //   const key = `${item.deviceKey}${index}`
        //   if (index === 0) {
        //     this.defaultDeviceKey = key
        //     this.dustObj = item
        //     console.log(this.dustObj)
        //     this.dustObj.deviceKey = key
        //   }
        //   item.value = key
        //   item.label = key
        //   item.deviceKey = key // 在末尾处加了index
        //   this.arrDustsOptions.push(item)
        // })
        this.arrRoadMonitor = val.lives.filter(
          (item) => item.type === 1
        )
        this.arrCarMonitor = val.lives.filter(
          (item) => item.type === 2
        )
        this.arrWaterMonitor = val.lives.filter(
          (item) => item.type === 3
        )
        this.setDisplayMonitor(this.arrRoadMonitor, 1)
        this.setDisplayMonitor(this.arrCarMonitor, 2)
        this.setDisplayMonitor(this.arrWaterMonitor, 3)
      } else {
        // _worksiteEntities.forEach((item) => {
        //   item.show = true
        // })

        this.arrDustsOptions.splice(
          0,
          this.arrDustsOptions.length
        )
        this.arrRoadMonitor.splice(
          0,
          this.arrRoadMonitor.length
        )
        this.arrCarMonitor.splice(
          0,
          this.arrCarMonitor.length
        )
        this.arrWaterMonitor.splice(
          0,
          this.arrWaterMonitor.length
        )
        this.disRoadMonitor.splice(
          0,
          this.disRoadMonitor.length
        )
        this.disCarMonitor.splice(
          0,
          this.disCarMonitor.length
        )
        this.disWaterMonitor.splice(
          0,
          this.disWaterMonitor.length
        )
        this.defaultDeviceKey = ''
        this.dustObj = {
          pm25: '',
          pm10: '',
          noise: '',
          temperature: '',
          deviceKey: '',
          humidity: '',
          windDirection: '',
          windspeed: ''
        }

        this.removeExistVideoEntities()
        this.closeVideo()
      }
    },
    totalMonitorDeviceCount(val) {
      this.chart1Options.series[0].data[1].value = val || 0
    }
  },
  async created() {
    const { layerManager, viewer } = await getAction(
      this.defaultViewId
    )
    _layerManager = layerManager
    _viewer = viewer

    topicDefaultList('wanwuhulian').then(async (res) => {
      if (res.success && res.data) {
        for await (const item of res.data.reverse()) {
          item.dataList = await this.getDataList(item.pkid)
          if (!item.dataList.length) {
            return
          }
          item.serviceUrl = item.dataList[0].serviceUrl
          item.signService = item.dataList[0].signService
          item.currentDataIndex = 0
          this.$bus.$emit('showDataList', item)
          await _layerManager.addAsync(item)
        }
      }
    })
  },
  mounted() {
    New.$on('projectShow', (data) => {
      if (!data) {
        this.rightHide = true
        // this.detailVisible = false
      } else {
        this.rightHide = false
      }
    })

    this.getIOTData()

    this.getCurrentTime()
    this.$bus.$on('clickEntity', (id) => {
      // console.log('点击了entity', id)
      const clickedWorksite = this.worksiteData.find(
        (item) => item.id === id
      )
      const clickedWorksiteIndex =
        this.shownWorksiteData.findIndex(
          (item) => item.id === id
        )
      const clickedVideoEntity = _videoEntities.find(
        (item) => item.id === id
      )
      // console.log(clickedWorksiteIndex)
      if (clickedWorksite) {
        // this.selectedWorksite = clickedWorksite
        this.handleWorksiteClick(clickedWorksiteIndex)
      } else if (clickedVideoEntity) {
        console.log('点击了视频标点', clickedVideoEntity)
        const live = this.selectedWorksite.lives.find(
          (item) => item.name === clickedVideoEntity.id
        )
        if (live) {
          this.videoData = {
            name: live.name,
            url: live.channel,
            dateTime: new Date().toLocaleString()
          }
          if (!this.showVideo) {
            this.showVideo = true
            _player = new HlsJsPlayer({
              id: 'hls-player',
              url: live.channel,
              width: 580,
              autoplay: true
            })
          } else {
            _player.src = live.channel
            _player.reload()
          }
        }
      }
    })

    const { innerHeight } = window
    this.$refs.videoDialog.style.setProperty(
      'top',
      `${(innerHeight - 340) / 2 - 60}px`
    )
  },
  beforeDestroy() {
    this.$bus.$off('clickEntity')

    console.log('万物互联destroy')
    this.removeExistWorksiteEntities()
    this.removeExistVideoEntities()
    this.closeVideo()
  },
  methods: {
    // 将数组按照某个字段统计
    classify(arr, fieldName) {
      const map = {}
      const myArr = []
      for (let i = 0; i < arr.length; i++) {
        if (!map[arr[i][fieldName]]) {
          myArr.push({
            fieldName: arr[i][fieldName],
            data: [arr[i]]
          })
          map[arr[i][fieldName]] = arr[i]
        } else {
          for (let j = 0; j < myArr.length; j++) {
            if (arr[i][fieldName] === myArr[j].fieldName) {
              myArr[j].data.push(arr[i])
              break
            }
          }
        }
      }
      return myArr
    },
    async getIOTData() {
      await this.iotAuth()
    },
    // iot接口授权
    async iotAuth() {
      const result = {
        success: false,
        token: '',
        message: ''
      }
      getResourceConfig({ name: 'iot' }).then(
        async (res) => {
          let account = ''
          let password = ''
          let openId = ''
          if (res.data.length > 0 && res.data[0].content) {
            const params = new URLSearchParams(
              res.data[0].content
            )
            account = params.get('account')
            password = params.get('password')
            openId = params.get('openId')
          }
          const signMD5 = md5(
            `account=${account}&openId=${openId}&password=${password}${openId}`
          )
          await iotRequest({
            method: 'POST',
            url: '/passport',
            headers: {
              timestamp: new Date().getTime(),
              sign: signMD5
            },
            data: {
              account: account,
              password: password,
              openId: openId
            }
          })
            .then((res) => {
              if (
                res.data &&
                res.data.code === 200 &&
                res.data.data
              ) {
                this.iotMonitorData(res.data.data)
              }
            })
            .catch((err) => {
              console.error(err)
              result.message = err.toLocaleString()
            })
          return result
        }
      )
    },
    // 获取iot监控、扬尘设备数据
    iotMonitorData(token) {
      iotRequest({
        method: 'GET',
        url: '/monitor',
        headers: {
          timestamp: new Date().getTime(),
          'x-token': token
        }
      })
        .then((res) => {
          if (
            res.status === 200 &&
            res.data &&
            res.data.code === 200 &&
            res.data.data
          ) {
            // console.log(res)
            this.worksiteData.splice(
              0,
              this.worksiteData.length
            )
            this.worksiteData.push(...res.data.data)
            this.removeExistWorksiteEntities()
            if (this.$route.path.indexOf('/iot') !== -1) {
              this.addWorksiteEntities()
            }
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },
    getCurrentTime() {
      const date = new Date()
      this.currentTime = date.toLocaleString()
    },
    // 添加工地标点
    addWorksiteEntities() {
      const tempWorksitePositions = []
      this.worksiteData.forEach((res) => {
        tempWorksitePositions.push({
          id: res.id,
          title: res.title,
          position: [+res.longitude, +res.latitude, 50]
        })
      })
      tempWorksitePositions.forEach((item) => {
        const entity = new Cesium.Entity({
          id: item.id,
          name: item.title,
          position: Cesium.Cartesian3.fromDegrees(
            ...item.position
          ),
          billboard: {
            image: './gongdidianwei.png',
            width: 32,
            height: 38,
            // position: Cesium.Cartesian3.fromDegrees(
            //   ...item.position
            // ),
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            // heightReference: 6000
            heightReference:
              Cesium.HeightReference.RELATIVE_TO_GROUND
          },
          // label: {
          //   text:
          //     item.title.length > 13
          //       ? item.title.substring(0, 13) + '...'
          //       : item.title,
          //   font: '500 26px',
          //   style: Cesium.LabelStyle.FILL,
          //   fillColor: Cesium.Color.WHITE,
          //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          //   heightReference:
          //     Cesium.HeightReference.CLAMP_TO_GROUND,
          //   pixelOffset: new Cesium.Cartesian2(0, -25)
          // },
          show: true
        })
        _worksiteEntities.push(entity)
        _viewer.entities.add(entity)
      })
    },
    // 移除已有工地标点
    removeExistWorksiteEntities() {
      _worksiteEntities.forEach((item) => {
        _viewer.entities.remove(item)
      })
      _worksiteEntities.splice(0, _worksiteEntities.length)
    },
    // 添加视频标点
    addVideoEntities(videos) {
      console.log('videos', videos)
      const tempVideoPositions = [
        {
          name: '录像机_通道1',
          channel:
            'http://hls01open.ys7.com/openlive/eed68d7c57f346e3a505fd923b34ffd6.m3u8',
          type: 1,
          position: [104.375903, 30.29415, -0.002163]
        },
        {
          name: '录像机_通道2',
          channel:
            'http://hls01open.ys7.com/openlive/28b6890af7da4aba88c08fd2da00e516.m3u8',
          type: 1,
          position: [104.367471, 30.296635, -0.002105]
        },
        {
          name: '录像机_通道3',
          channel:
            'http://hls01open.ys7.com/openlive/4ef58c719ac24ed3b4a71071f2a8ab6e.m3u8',
          type: 1,
          position: [104.388547, 30.294207, -0.003325]
        },
        {
          name: '录像机_通道5',
          channel:
            'http://hls01open.ys7.com/openlive/8e911fc75499447e87026e88abe90a36.m3u8',
          type: 1,
          position: [104.376217, 30.287034, -0.000716]
        },
        {
          name: '录像机_通道6',
          channel:
            'http://hls01open.ys7.com/openlive/7e100cfffa0f4796b742ce21ab07c6ea.m3u8',
          type: 1,
          position: [104.376103, 30.301148, -0.001617]
        },
        {
          name: '录像机_通道1_PL',
          channel:
            'http://hls01open.ys7.com/openlive/eed68d7c57f346e3a505fd923b34ffd6.m3u8',
          type: 2,
          position: [104.388118, 30.303066, -0.002827]
        },
        {
          name: '录像机_通道4',
          channel:
            'http://hls01open.ys7.com/openlive/b7829fcf443841e78a10c9059ee61459.m3u8',
          type: 3,
          position: [104.363673, 30.285525, -0.003073]
        }
      ]
      tempVideoPositions.forEach((item) => {
        const entity = new Cesium.Entity({
          id: item.name,
          name: item.name,
          position: Cesium.Cartesian3.fromDegrees(
            ...item.position
          ),
          billboard: {
            image: './video-monitor.png',
            width: 35,
            height: 35,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            heightReference:
              Cesium.HeightReference.CLAMP_TO_GROUND
          },
          show: true
        })
        _videoEntities.push(entity)
        _viewer.entities.add(entity)
      })
    },
    // 移除已有视频标点
    removeExistVideoEntities() {
      _videoEntities.forEach((item) => {
        _viewer.entities.remove(item)
      })
      _videoEntities.splice(0, _videoEntities.length)
    },
    closeVideo() {
      if (_player) {
        _player.destroy(true)
        _player = null
      }
      this.showVideo = false
      this.clickVideoName = ''
      this.videoData = {
        name: '',
        channel: '',
        dateTime: ''
      }
    },
    statusCodeToStatusText(num) {
      let text
      switch (num) {
        case 1:
          text = '在建项目'
          break
        case 2:
          text = '拟建项目'
          break
        case 3:
          text = '完工项目'
          break
        case 4:
          text = '投入使用'
          break
        default:
          break
      }
      return text
    },
    progressStatusCodeToStatusText(num) {
      let text
      switch (num) {
        case 1:
          text = '基础施工'
          break
        case 2:
          text = '地坪施工'
          break
        case 3:
          text = '标准层施工'
          break
        case 4:
          text = '主体封顶'
          break
        case 5:
          text = '装修安装'
          break
        case 6:
          text = '竣工验收'
          break
        case 7:
          text = '项目投运'
          break
        default:
          break
      }
      return text
    },
    // 工地列表点击
    handleWorksiteClick(index) {
      // console.log(
      //   '点击工地',
      //   index,
      //   this.shownWorksiteData[index]
      // )
      this.worksiteList.forEach((item) => {
        if (item.fieldName === 'status') {
          item.value = this.statusCodeToStatusText(
            this.shownWorksiteData[index][item.fieldName]
          )
        } else if (item.fieldName === 'progressStatus') {
          item.value = this.progressStatusCodeToStatusText(
            this.shownWorksiteData[index][item.fieldName]
          )
        } else {
          item.value =
            this.shownWorksiteData[index][item.fieldName]
        }
        this.worksiteImages = [
          [
            {
              name: '效果图',
              url: this.shownWorksiteData[index].image2
            }
          ],
          [
            {
              name: '平面图',
              url: this.shownWorksiteData[index].floorPlan
            }
          ],
          [
            {
              name: '形象进度图',
              url: this.shownWorksiteData[index].image
            }
          ]
        ]
      })
      _viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          +this.shownWorksiteData[index].longitude,
          +this.shownWorksiteData[index].latitude,
          2000
        ),
        orientation: {
          heading: _viewer.camera.heading,
          roll: _viewer.camera.roll
        }
      })
      this.selectedWorksite = this.shownWorksiteData[index]
    },
    // 视频监控更多点击
    moreVideo() {
      console.log('更多视频监控', this.selectedWorksite)
    },
    handleLeftMouseDown(e) {
      this.leftX = e.clientX
      this.leftWidth = this.$refs.leftRef.offsetWidth
      document.documentElement.addEventListener(
        'mousemove',
        this.leftMove
      )
      document.documentElement.addEventListener(
        'mouseup',
        this.leftEnd
      )
    },
    leftMove(e) {
      let width = this.leftWidth + e.clientX - this.leftX
      width = width >= 500 ? 500 : width < 340 ? 340 : width
      this.$refs.leftRef.style['min-width'] = `${width}px`
      this.$refs.leftRef.style.setProperty(
        '--scroll-width',
        `${-width}px`
      )
    },
    leftEnd() {
      document.documentElement.removeEventListener(
        'mousemove',
        this.leftMove
      )
      document.documentElement.removeEventListener(
        'mouseup',
        this.leftEnd
      )
    },
    handleRightMouseDown(e) {
      this.rightX = e.clientX
      this.rightWidth = this.$refs.rightRef.offsetWidth
      document.documentElement.addEventListener(
        'mousemove',
        this.rightMove
      )
      document.documentElement.addEventListener(
        'mouseup',
        this.rightEnd
      )
    },
    rightMove(e) {
      let width =
        this.rightWidth + (this.rightX - e.clientX)
      width = width >= 500 ? 500 : width < 300 ? 300 : width
      this.$refs.rightRef.style['min-width'] = `${width}px`
      this.$refs.rightRef.style.setProperty(
        '--scroll-width',
        `${-(width - 47 - 1)}px`
      )
    },
    rightEnd() {
      document.documentElement.removeEventListener(
        'mousemove',
        this.rightMove
      )
      document.documentElement.removeEventListener(
        'mouseup',
        this.rightEnd
      )
    },
    changeDeviceKey(key) {
      this.dustObj = this.arrDustsOptions.find(
        (item) => key === item.deviceKey
      )
    },
    setDisplayMonitor(arrMonitor, type) {
      let disValue = []
      if (arrMonitor.length > 2) {
        disValue = [...arrMonitor.slice(0, 2)]
      } else {
        disValue = arrMonitor
      }
      switch (type) {
        case 1:
          this.disRoadMonitor = disValue
          break
        case 2:
          this.disCarMonitor = disValue
          break
        case 3:
          this.disWaterMonitor = disValue
          break
      }
    },
    clickMonitor(live) {
      this.clickVideoName = live.name
      this.videoData = {
        name: live.name,
        url: live.channel,
        dateTime: new Date().toLocaleString()
      }
      if (!this.showVideo) {
        this.showVideo = true
        _player = new HlsJsPlayer({
          id: 'hls-player',
          url: live.channel,
          width: 580,
          autoplay: true
        })
      } else {
        _player.src = live.channel
        _player.reload()
      }
    },
    clickRoadPre() {
      this.disRoadMonitor = this.clickPreVideo(
        this.disRoadMonitor,
        this.arrRoadMonitor
      )
    },
    clickRoadNext() {
      this.disRoadMonitor = this.clickNextVideo(
        this.disRoadMonitor,
        this.arrRoadMonitor
      )
    },
    clickCarPre() {
      this.disCarMonitor = this.clickPreVideo(
        this.disCarMonitor,
        this.arrCarMonitor
      )
    },
    clickCarNext() {
      this.disCarMonitor = this.clickNextVideo(
        this.disCarMonitor,
        this.arrCarMonitor
      )
    },
    clickWaterPre() {
      this.disWaterMonitor = this.clickPreVideo(
        this.disWaterMonitor,
        this.arrWaterMonitor
      )
    },
    clickWaterNext() {
      this.disWaterMonitor = this.clickNextVideo(
        this.disWaterMonitor,
        this.arrWaterMonitor
      )
    },
    clickPreVideo(dis, arr) {
      const live = dis[0]
      const index = arr.indexOf(live)
      if (arr[index - 1]) {
        dis = []
        dis = [...arr.slice(index - 2, index)]
      }
      return dis
    },
    clickNextVideo(dis, arr) {
      const live = dis[dis.length - 1]
      const index = arr.indexOf(live)
      if (arr[index + 1] && arr[index + 2]) {
        dis = []
        dis = [...arr.slice(index + 1, index + 3)]
      } else if (arr[index + 1] && !arr[index + 2]) {
        dis = []
        dis = [...arr.slice(index + 1, index + 2)]
      }
      return dis
    },
    // 获取服务的地图服务列表
    async getDataList(pkid) {
      const list = []
      await retrieveDataServiceById({
        pageIndex: 1,
        pageSize: 999,
        serviceId: pkid
      }).then((res) => {
        if (res.success) {
          if (res.data && res.data.length) {
            // 将配置的数据列表赋给原始数据
            list.push(...res.data)
          } else {
            this.$message.warning('该服务未配置数据')
          }
        } else {
          this.$message.error(
            res.message || '服务数据查询失败'
          )
        }
      })
      return list
    }
  }
}
</script>

<style lang="scss" scoped>
.left {
  position: fixed;
  left: 0;
  top: 60px;
  width: 340px;
  height: calc(100% - 60px);
  padding: 14px 0 14px 14px;
  background-color: transparent;
  transition: all 1s;
  --scroll-width: -340px;

  &-panel {
    height: 100%;
    background-color: rgba(7, 13, 35, 0.5);

    ::v-deep {
      .el-scrollbar {
        height: 100%;

        &__wrap {
          overflow-x: hidden;
        }

        &__view {
          padding-right: 8px;
        }
      }
    }

    .header {
      padding: 10px 11px 10px 15px;

      &-icon {
        position: relative;
        width: 60px;
        height: 60px;
        margin-right: 3px;

        img.background {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }

        img.center {
          width: 34px;
          height: 34px;
          z-index: 1;
        }
      }

      &-title {
        font-size: 14px;
        font-weight: 400;
        color: white;
      }

      .area {
        font-size: 20px;
        font-weight: bold;
        color: white;
      }

      .unit {
        font-size: 14px;
        font-weight: 400;
        color: white;
      }
    }

    .line-separator {
      width: 100%;
      padding: 0 8px;
    }

    .chart-wrapper {
      padding: 20px 10px;

      &:last-of-type {
        padding-bottom: 0;
      }

      &-content {
        margin-top: 20px;

        .chart {
          width: 50% !important;
        }
      }

      .legend {
        &:not(:last-of-type) {
          margin-bottom: 13px;
        }

        &-round-icon {
          width: 7px;
          height: 7px;
          margin-right: 3px;
          border-radius: 50%;

          &.blue {
            background-color: #696dff;
          }

          &.light-blue {
            background-color: #00ffff;
          }

          &.green {
            background-color: #00d075;
          }

          &.orange {
            background-color: #ffa862;
          }

          &.yellow {
            background-color: #ffdda2;
          }
        }

        &-title {
          font-size: 14px;
          font-weight: 400;
          color: white;
          margin-right: 6px;
        }

        &-value {
          font-size: 14px;
          font-weight: bold;
          color: white;
          float: right;
          right: 20px;
          position: absolute;
        }
      }

      .chart-title {
        font-size: 12px;
        font-weight: 400;
        color: #d2e6f0;
        align-self: flex-end;
        margin-top: 10px;
      }
    }

    .title {
      &-prefix {
        position: relative;
        top: 2px;
        width: 6px;
        height: 16px;
        margin-right: 5px;
        object-fit: fill;
      }

      span {
        font-size: 14px;
        font-weight: 800;
        line-height: 14px;
        background: linear-gradient(
          180deg,
          white 0%,
          #a4bbdd 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .more {
      font-size: 12px;
      font-weight: 400;
      color: white;
      cursor: pointer;

      &:active {
        color: #d8ded3;
      }
    }
  }

  &-hide {
    left: var(--scroll-width);

    & > .left-close {
      background-color: red;

      &::before,
      &::after {
        transform-origin: 6px 1px;
      }
    }
  }

  &-close {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 44px;
    cursor: pointer;
    background: #192f3d;
    opacity: 0.7;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 7px;
      height: 2px;
      background: #fff;
      top: 50%;
      left: 50%;
      transform-origin: 1px 1px;
    }

    &::before {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(-45deg);
    }

    &::after {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(45deg);
    }
  }

  .sites-num {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-left: 6px;
    padding-right: 12px;
    background: url('../../../assets/img/iot-statistics-background.png')
      no-repeat;
    background-size: 100% 100%;

    .sites-img {
      width: 71px;
      height: 57px;
    }

    .sites-statistics {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      // > div {
      //   font-size: 16px;
      // }
    }
  }

  .device-num {
    width: 100%;
    height: 130px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
    margin-left: 6px;
    padding-right: 12px;
    background: url('../../../assets/img/iot-statistics-no-radius-background.png')
      no-repeat;
    background-size: 100% 100%;

    &:last-of-type {
      margin-bottom: 10px;
    }

    > div {
      height: 80px;

      div:first-child {
        margin-bottom: 30px;
      }
    }

    div:first-child {
      div:first-child {
        margin-bottom: 16px;
      }
    }

    &-text {
      font-size: 14px;
    }

    .sites-img {
      width: 61px;
      height: 47px;
    }
  }

  .bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    cursor: col-resize;
  }
}

.right {
  position: fixed;
  right: 48px;
  top: 60px;
  width: 300px;
  height: calc(100% - 60px);
  padding: 0;
  background: linear-gradient(
    90deg,
    rgba(25, 47, 61, 0.85),
    rgba(25, 47, 61, 0.1)
  );
  transition: all 1s;
  --scroll-width: -252px;

  ::v-deep {
    .el-scrollbar {
      height: 100%;
    }

    .el-scrollbar__wrap {
      overflow-x: hidden;
      padding: 0 10px;

      .el-scrollbar__view {
        height: 100%;
      }
    }
  }

  &-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 10px 0;
    position: relative;
    display: flex;
    flex-direction: column;

    &-tag {
      &-t {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;

        &::before,
        &::after {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          top: 0;
        }

        &::before {
          left: 0;
          border-top: 4px solid #fff;
          border-right: 4px solid transparent;
        }

        &::after {
          right: 0;
          border-top: 4px solid #fff;
          border-left: 4px solid transparent;
        }
      }

      &-b {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;

        &::before,
        &::after {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          bottom: 0;
        }

        &::before {
          left: 0;
          border-bottom: 4px solid #fff;
          border-right: 4px solid transparent;
        }

        &::after {
          right: 0;
          border-bottom: 4px solid #fff;
          border-left: 4px solid transparent;
        }
      }
    }

    &-title {
      height: 50px;
      line-height: 50px;
      padding-left: 14px;
      font-size: 18px;
      font-weight: 800;
      color: #00d2ff;
      word-break: keep-all;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    &-search {
      padding: 10px;
    }

    &-list {
      flex: 1;
      overflow-y: hidden;

      .worksite-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 22px 11px 9px;
        border: 1px solid #ffffff33;
        background: #00000033;
        cursor: pointer;

        &:not(:first-of-type) {
          margin-top: 4px;
        }

        &-name {
          font-size: 14px;
          line-height: 18px;
          font-weight: 800;
          color: white;
        }

        &-period {
          font-size: 12px;
          line-height: 12px;
          font-weight: 500;
          color: #d2e6f0;
          margin-top: 10px;
        }
      }
    }
  }

  &-detail {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &-header {
      display: flex;
      padding: 20px 30px 18px 12px;
      border-bottom: 1px #d2e6f033 solid;

      .back-button {
        width: 24px;
        height: 24px;
        background: #ffffff33;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        i {
          font-size: 6px;
          font-weight: 800;
          color: white;
        }
      }

      &-right {
        flex: 1;
        margin-left: 9px;
        overflow-x: hidden;

        .name {
          font-size: 14px;
          font-weight: bold;
          color: white;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .address {
          display: flex;
          align-items: center;
          margin-top: 14px;
          overflow-x: hidden;

          span {
            font-size: 12px;
            font-weight: 400;
            color: #d2e6f0;
            margin-left: 9px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }

    &-content {
      flex: 1;
      overflow: hidden;
      padding: 23px 0;

      .worksite-property:not(:first-of-type) {
        margin-top: 20px;
      }

      .worksite-image-property {
        margin-top: 20px;
      }
    }
  }

  &-hide {
    right: var(--scroll-width);

    & > .right-close {
      background-color: red;

      &::before,
      &::after {
        transform-origin: 1px 1px;
      }
    }
  }

  &-close {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 44px;
    cursor: pointer;
    background: #192f3d;
    opacity: 0.7;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 7px;
      height: 2px;
      background: #fff;
      top: 50%;
      left: 50%;
      // transform-origin: 1px 1px;
      transform-origin: 6px 1px;
    }

    &::before {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(-45deg);
    }

    &::after {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(45deg);
    }
  }

  .bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    cursor: col-resize;
  }
}

.video-dialog {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 340px;
  display: flex;
  flex-direction: column;

  &-header {
    background-color: #192f3d;
    height: 35px;
    padding: 12px 10px 12px 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 14px;
      font-weight: 800;
      color: #ffffff;
    }

    .date {
      flex: 1;
      font-size: 14px;
      font-weight: 800;
      color: #ffffff;
      text-align: right;
      margin: 0 10px;
    }

    .close {
      cursor: pointer;
      width: 10px;
      height: 10px;
      position: relative;

      &::after,
      &::before {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: white;
      }

      &::before {
        transform: translateX(-50%) translateY(-50%)
          rotateZ(45deg);
      }

      &::after {
        transform: translateX(-50%) translateY(-50%)
          rotateZ(-45deg);
      }
    }
  }

  &-content {
    background-color: #537a93;
    flex: 1;
    padding: 10px;

    #hls-player {
      border: 1px solid #00d2ff;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.ycjc {
  display: flex;
  justify-content: space-around;
}

@mixin ycjc-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ycjc-item {
  @include ycjc-item;
}

.ycjc-prefix {
  margin-top: 13px;
  z-index: 2;
}

.ycjc-afterMarker {
  margin: 13px 0px 0px -30px;
  z-index: 1;
}

.ycjc-pre {
  @include ycjc-item;
  width: 78px;
  height: 61px;
  background: url('../../../assets/img/iot-ycjc-pre.png')
    no-repeat;
  background-size: 100% 100%;

  &-index {
    font-size: 14px;
    color: #d2e6f0;
    font-weight: bold;
    font-family: DIN;
  }
}

.ycjc-after {
  @include ycjc-item;
  width: 120px;
  height: 61px;
  background: url('../../../assets/img/iot-ycjc-after.png')
    no-repeat;
  background-size: 100% 100%;

  &-index {
    font-size: 12px;
    font-family: DIN;
    font-weight: bold;
    color: #d2e6f0;
  }
}

.video-monitor {
  @include ycjc-item;
  flex-direction: row;
  flex-wrap: wrap;

  &-road {
    margin: 12px 6px;
    width: 132px;
    height: 110px;
    background: url('../../../assets/img/spjk-road.png');
    background-size: 100% 100%;
    z-index: 1;
    cursor: pointer;

    &-title {
      text-align: center;
      margin-top: 120px;
      font-size: 12px;
      color: #d2e6f0;
    }

    &-active {
      border: 3px solid #1e9fbf;
    }
  }

  &-car {
    margin: 12px 6px;
    width: 132px;
    height: 110px;
    background: url('../../../assets/img/spjk-car.png');
    background-size: 100% 100%;
    z-index: 1;
    cursor: pointer;

    &-title {
      text-align: center;
      margin-top: 120px;
      font-size: 12px;
      color: #d2e6f0;
    }

    &-active {
      border: 3px solid #1e9fbf;
    }
  }

  &-water {
    margin: 12px 6px;
    width: 132px;
    height: 110px;
    background: url('../../../assets/img/spjk-water.png');
    background-size: 100% 100%;
    z-index: 1;
    cursor: pointer;

    &-title {
      text-align: center;
      margin-top: 120px;
      font-size: 12px;
      color: #d2e6f0;
    }

    &-active {
      border: 3px solid #1e9fbf;
    }
  }
}

.current-time {
  margin-left: 70px;
  color: #d2e6f0;
  font-size: 12px;
}

.shuanxin-marker {
  margin-left: 10px;
}

::v-deep {
  .el-select.select-devicekey {
    width: calc(100% - 21px * 2);
    height: 30px;
    margin: 0px 21px;

    border: 1px solid #075977;
    border-radius: 4px;

    .el-input {
      height: 30px;
      border: none;
    }

    .el-input__inner {
      background: linear-gradient(
        0deg,
        rgba(14, 29, 47, 0.82),
        rgba(34, 60, 88, 0.82)
      );
      border: none;
      border-radius: 4px;
      height: 30px;
      color: white;
    }

    .el-input__suffix {
      top: 10px;

      &-inner {
        i {
          height: 25px;
        }
      }
    }
  }
}

.ycjc-fxfs {
  margin: 20px 10px 0 10px;
  color: #d2e6f0;
}

.ycjc-spjk {
  @include ycjc-item;
  width: calc(100% - 21px * 2);
  height: 30px;
  margin-left: 20px;
  margin-top: 40px;
  background: url('../../../assets/img/iot-spjk-title.png')
    no-repeat;
  background-size: 100% 100%;

  .jk-circle {
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
  }

  .dljk-circle {
    @extend .jk-circle;
    background: linear-gradient(180deg, #e6fdff, #00fcff);
  }

  .cljk-circle {
    @extend .jk-circle;
    background: linear-gradient(180deg, #d8ffea, #00d952);
  }

  .pljk-circle {
    @extend .jk-circle;
    background: linear-gradient(180deg, #fcf2ff, #5865df);
  }

  &-title {
    font-size: 14px;
    color: #d2e6f0;
    font-weight: bold;
    font-family: DIN;
  }
}

.video-syb {
  color: rgba(255, 255, 255, 0.5);
}

.video-xyb {
  color: white;
}

.syb-active {
  color: white;
}

.xyb-active {
  color: rgba(255, 255, 255, 0.5);
}

.legend-layer
  .el-select-dropdown__list
  .el-select-dropdown__item.selected {
  color: #00d2ff;
}
</style>
